<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Tween.js / video and time</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="info">
			<h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
			<h2>05 _ video and time</h2>
			<p>Playing a video, synchronizing a tween to it</p>
		</div>

		<div id="target" style="position: absolute; left: 50px; top: 300px; font-size: 100px; letter-spacing: -7px; ">
			<video id="video" src="video/sintel.webm" width="320" height="138"></video>
		</div>

		<script src="../src/Tween.js"></script>
		<script src="js/RequestAnimationFrame.js"></script>
		<script>

			var video;

			window.addEventListener('load', function() {
				init();
				animate();
			});

			function init() {

				var output = document.createElement( 'div' );

				var target = document.getElementById( 'target' );
				target.appendChild( output );

				video = document.getElementById( 'video' );
				video.addEventListener( 'play', function() {
					
					new TWEEN.Tween( { x: 50, y: 0 } )
						.to( { x: 400 }, this.duration )
						.easing( TWEEN.Easing.Linear.None )
						.onUpdate( function () {

							var roundX = Math.round(this.x);
							var transform = 'translateX(' + roundX + 'px)';
							output.innerHTML = 'x == ' + roundX;
							target.style.transform = transform;

						} )
						.start( video.currentTime );

				}, false );

				video.play();

			}

			function animate() {

				requestAnimationFrame( animate );

				if ( video.readyState === video.HAVE_ENOUGH_DATA ) {

					TWEEN.update( video.currentTime );

				}
				
			}

		</script>
	</body>
</html>
